<template>
  <view class="resource-container" @click="getDetailClick">
    <view class="box">
      <view class="left">
        <view class="title">{{ item.title }} </view>
        <view class="bottom">
          <view class="look-num">
            <i class="iconfont icon-chakan" />
            <text>{{ item.cksl }}</text>
          </view>
          <view class="day"> {{ item.created_at }}</view>
          <view class="top" v-if="topShow">置顶文章</view>
        </view>
      </view>
      <view class="advertising">
        <image
          class="img"
          :src="'http://temp.puyueheng.com' + item.suoluetu"
          mode="scaleToFill"
        />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      topShow: false,
    };
  },
  methods: {
    getDetailClick() {
      this.$emit("getDetailClick", this.item);
    },
  },
};
</script>

<style lang="scss" scoped>
.resource-container {
  background-color: #fff;
  box-sizing: border-box;
  padding: 0 20rpx;
  .box {
    border-bottom: 1rpx solid #eee;
    box-sizing: border-box;
    padding: 20rpx;
    display: flex;
  }
  .left {
    width: 500rpx;
    .title {
      font-size: 28rpx;
    }
    .bottom {
      display: flex;
      align-items: center;
      margin-top: 40rpx;
      .look-num {
        font-size: 24rpx;
        color: #bebebe;
        text {
          margin-left: 8rpx;
        }
      }
      .day {
        font-size: 24rpx;
        color: #bebebe;
        margin-left: 30rpx;
      }
      .top {
        background-image: linear-gradient(to right, #e81715, #fb804f);
        font-size: 24rpx;
        padding: 5rpx 8rpx;
        box-sizing: border-box;
        border-radius: 15rpx;
        color: #fff;
        margin-left: 30rpx;
      }
    }
  }
  .advertising {
    margin-left: 20rpx;
    .img {
      width: 200rpx;
      height: 150rpx;
    }
  }
}
</style>
